<template>
	<div>

		<div >
			<template v-for="(item,index) in menus">
			<el-menu  default-active="0" class="el-menu-vertical-demo" @select="selectNav" :key="index">
				<el-submenu  v-if="item.children !=null && item.children.length>0" :index="index+''">
					<template slot="title">
						<i :class="item.menuClass"></i>
						<span>{{item.menuName}}</span>
					</template>
					<menus :menus="item.children"></menus> 
				</el-submenu>
				<el-menu-item v-else :index="item.menuUri">
						<i :class="item.menuClass"></i>
						<span slot="title">{{item.menuName}}</span>
				</el-menu-item>
			</el-menu>
			</template>
		</div>

	</div>
</template>

<script>
	export default {
		name: 'menus',
		props: ["menus"],

		methods: {
			selectNav(index) {
				this.$router.push(index);
			},
		}
	}
</script>
<style>

</style>
